<template>
    <div class="add-base">
        <Form :label-width="80">
            <FormItem label="商品品牌">
                <Select v-model="brand" style="width:200px">
                    <Option v-for="item in brandList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
            <FormItem label="商品编号">
                <Input v-model="sn"></Input>
            </FormItem>
            <FormItem label="商品名称">
                <Input v-model="name"></Input>
            </FormItem>
            <FormItem label="市场价">
                <Input v-model="price" placeholder="￥/每件"></Input>
            </FormItem>
            <FormItem label="库存">
                <Input v-model="stock" placeholder="件"></Input>
            </FormItem>
            <FormItem label="商品图片">
                <img-uploader @selected="onSelectImg"></img-uploader>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                brandList:[],
                brand:'',
                sn:'',
                name:'',
                price:'',
                stock:'',
                img:''
            }
        },
        methods: {
            getGoodsBrand () {
                const self = this;
                this.$http.getGoodsBrand().then(res => {
                    if(res.success === true) {
                        self.brandList = res.data
                    }
                }, error => {
                })
            },
            onSelectImg(val){
                this.img = val;
            }
        },
        watch:{
            brand:function(val){
                const data = {
                    brand:this.brand,
                    sn:this.sn,
                    name:this.name,
                    price:this.price,
                    stock:this.stock,
                    img:this.img
                }
                this.$emit('change',data);
            },
            sn:function(val){
                const data = {
                    brand:this.brand,
                    sn:val,
                    name:this.name,
                    price:this.price,
                    stock:this.stock,
                    img:this.img
                }
                this.$emit('change',data);
            },
            name:function(val){
                const data = {
                    brand:this.brand,
                    sn:val,
                    name:val,
                    price:this.price,
                    stock:this.stock,
                    img:this.img
                }
                this.$emit('change',data);
            },
            price:function(val){
                const data = {
                    brand:this.brand,
                    sn:this.sn,
                    name:this.name,
                    price:val,
                    stock:this.stock,
                    img:this.img
                }
                this.$emit('change',data);
            },
            stock:function(val){
                const data = {
                    brand:this.brand,
                    sn:this.sn,
                    name:this.name,
                    price:this.price,
                    stock:val,
                    img:this.img
                }
                this.$emit('change',data);
            },
            img:function(val){
                const data = {
                    brand:this.brand,
                    sn:this.sn,
                    name:this.name,
                    price:this.price,
                    stock:this.stock,
                    img:val
                }
                this.$emit('change',data);
            }
        },
        created () {
            this.getGoodsBrand()
        }
    }
</script>